<template>
	<view class="content">
    <view v-for="(audio, index) in list" :key="index">
      <gurudin-audio
          :src="audio.src"
          :poster="audio.poster"
          :name="audio.name"
          :author="audio.author"
          :call="playCall"
          :theme="(index%2)==0 ? 'light' : 'dark'"
          ref="audioPlayers"
        ></gurudin-audio>
      <view :style="{height: '100rpx'}"></view>
    </view>

	</view>
</template>

<script>
  let vm = null

	export default {
		data() {
			return {
        list: [
          {
            src: 'https://www.xzmp3.com/down/d56b5d8b246a.mp3',
            poster: '/static/music/晴天.png',
            name: '晴天',
            author: '周杰伦'
          },
          {
            src: 'https://www.xzmp3.com/down/68a3b1c7f770.mp3',
            poster: '/static/music/成都.png',
            name: '成都',
            author: '赵雷'
          },
		  {
		    src: 'https://www.xzmp3.com/down/dd8311d66b51.mp3',
		    poster: '/static/music/告白气球.png',
		    name: '告白气球',
		    author: '周杰伦'
		  },
		  {
		    src: 'https://www.xzmp3.com/down/91dfc04a9a1a.mp3',
		    poster: '/static/music/告白气球.png',
		    name: '七里香',
		    author: '周杰伦'
		  },
		  {
		    src: 'https://www.xzmp3.com/down/cd60e17a1579.mp3',
		    poster: '/static/music/unstoppable.png',
		    name: 'Unstoppable',
		    author: 'Sia'
		  },
		  {
		    src: 'https://www.xzmp3.com/down/e8a9686f28b0.mp3',
		    poster: '/static/music/阴天快乐.png',
		    name: '阴天快乐',
		    author: '陈奕迅'
		  },
		  {
		    src: 'https://www.xzmp3.com/down/0c8cdea7976f.mp3',
		    poster: '/static/music/A thousands years.png',
		    name: 'A Thousand Years',
		    author: 'Christina Perri'
		  },
		  {
		    src: 'https://www.xzmp3.com/down/f26c107c4d04.mp3',
		    poster: '/static/music/Because of you.png',
		    name: 'Because of you',
		    author: 'Kelly Clarkson'
		  },
		  {
		    src: 'https://www.xzmp3.com/down/11a80572f750.mp3',
		    poster: '/static/music/faded.png',
		    name: 'Faded',
		    author: 'Alan Walker'
		  },
        ],
			}
		},
		
		methods: {
      /**
       * 点击播放回调方法
       */
      playCall(src) {
        vm.$refs.audioPlayers.forEach(e =>{
          if (src != e.src) {
            e.onPause();
          }
        });
      },
		},

    created() {
      vm = this;
    }
	}
</script>

<style>
  page {
    /* background-color: #202124; */
    padding: 100rpx 0;
  }
  
  .content {
	  padding: 0 30rpx;
  }
</style>
